<template>
  <Card>
    <div class="title">
      <Icon size="18" type="md-list-box"/>
      创建事故社会赔付详情
      <Divider/>
    </div>
    <Form ref="addBaseForm" :label-width="170" :model="form" :rules="formValidate" inline>
      <div class="fromTitle">基础信息</div>
      <FormItem label="事故时间：" prop="date" style="width:49%;">
        <DatePicker
          v-model="form.date"
          placeholder="请选择时间"
          placement="bottom-start"
          style="width:100%"
          type="date"
        ></DatePicker>
      </FormItem>
      <FormItem label="车牌号：" prop="license_plate_num" style="width:49%;">
        <Select v-model="form.license_plate_num" clearable filterable placeholder="选择车牌号">
          <Option
            v-for="item in licensePlateNumList"
            :key="item.value"
            :value="item.value"
          >{{ item.label }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="案号：" prop="case_number" style="width:49%;">
        <Input v-model="form.case_number" placeholder="请输入案号"/>
      </FormItem>
      <Form-item label="驾驶员：" prop="driver" style="width:49%;">
        <Input v-model="form.driver" placeholder="驾驶员"/>
        <!-- <Select clearable filterable v-model="form.driver">
          <Option :key="item.id" :value="item.id" v-for="item in personnelList">{{ item.name }}</Option>
        </Select> -->
      </Form-item>
      <Form-item label="接案人：" style="width:49%;">
        <Input v-model="form.receiver_id" placeholder="请输入接案人"/>
      </Form-item>
      <Form-item label="事故情况：" prop="accident_info" style="width:99%;">
        <Input
          v-model="form.accident_info"
          :autosize="{minRows: 4,maxRows: 5}"
          :rows="4"
          placeholder="请输入..."
          type="textarea"
        ></Input>
      </Form-item>
      <Form-item label="事故责任认定：" style="width:49%;">
        <Input v-model="form.responsible" placeholder="请输入事故责任认定"/>
      </Form-item>
      <Form-item label="赔付金额：" style="width:49%;">
        <Input v-model="form.loss_cost" placeholder="请输入赔付金额"/>
      </Form-item>
      <Form-item label="备注：" prop="remark" style="width:99%;">
        <Input
          v-model="form.remark"
          :autosize="{minRows: 4,maxRows: 5}"
          :rows="4"
          placeholder="请输入..."
          type="textarea"
        ></Input>
      </Form-item>
      <Tabs style="margin-top:15px" type="card" value>

        <TabPane label="资料详情">
          <div class="btns">
            <upload-file
              ref="uploadStartFile"
              :params="{saveDir: 'accidentSociety', type: 'file'}"
              button-name="上传资料"
              @on-change="refreshTable($event,)"
            ></upload-file>
            <!--            <Button @click="delDetail" type="error" icon="md-trash">删除</Button>-->
          </div>
          <Table
            :columns="detailColumns"
            :data="detailData"
            border
            @on-selection-change="selectDetail"
          ></Table>
        </TabPane>
      </Tabs>
      <FormItem style="width:90%;text-align:center">
        <Button :loading="saveLoading" type="primary" @click="formSubmit('save')">保存</Button>
        <Button :loading="submitLoading" type="primary" @click="formSubmit('submit')">保存并提交审核</Button>
        <Button style="margin-left: 8px" @click="formReset">重置</Button>
      </FormItem>
    </Form>
  </Card>
</template>
<script>
import UploadPicThumbMultiple from '../../my-components/upload-pic-thumb-multiple'
import {storeAccidentSociety} from '../../../api/accidentSociety'
import {driverPersonnel} from '../../../api/accident'
import {licensePlateNumList} from '../../../api/bus'
import UploadFile from '../../my-components/upload-file'

export default {
  components: {
    UploadFile,
    UploadPicThumbMultiple
  },
  data() {
    return {
      licensePlateNumList: [],
      submitLoading: false,
      saveLoading: false,
      nodeKey: '',
      form: {
        date: '',
        license_plate_num: '',
        case_number: '',
        driver: '', // 默认当前用户
        receiver_id: '',
        accident_info: '',
        responsible: '',
        loss_cost: '',
        remark: ''
      },
      selectHurt: [],
      showHurtModal: false,
      editHurtModal: false,
      detailColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小（kb）',
          key: 'file_size',
          align: 'center'
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        }
      ],
      detailData: [],
      selectDetailList: [],
      formValidate: {
        date: [
          {
            required: true,
            message: '事故时间不能为空',
            trigger: 'blur',
            type: 'date'
          }
        ],
        license_plate_num: [
          {
            required: true,
            message: '车牌号不能为空',
            trigger: 'change',
            type: 'string'
          }
        ],
        case_number: [
          {required: true, message: '案号不能为空', trigger: 'blur'}
        ],
        accident_info: [
          {required: true, message: '事故情况不能为空', trigger: 'blur'}
        ],
        driver: [
          {
            required: true,
            message: '驾驶员不能为空',
            trigger: 'blur'
          }
        ]
      },
      personnelList: []
    }
  },
  watch: {
    $route: 'handleReset'
  },
  mounted() {
    driverPersonnel().then(res => {
      this.personnelList = res.data.result
    })
    this.setButtonStatus()
    this.init()
  },
  methods: {
    addHurtSituation() {
      this.clearHurtForm()
      this.showHurtModal = true
    },
    addMaintain() {
      this.maintainForm = {
        content: '',
        type: '',
        cost: '',
        date: ''
      }
      this.showMaintain = true
    },
    clearHurtForm() {
      this.hurtForm = {
        name: '',
        age: '',
        treatmentFee: '',
        other: '',
        hospitalizationDays: '',
        nursingDays: '',
        nursingFee: '',
        hangingBedDays: '',
        refund: '',
        compensation: '',
        caseReceiver: '',
        remark: ''
      }
      this.hurtFormEndDate = ''
    },
    delDetail() {
      console.log(this.selectDetailList)
    },
    handleHurtReset(form) {
      this.hurtForm = {
        name: '',
        age: '',
        medical_cost: '',
        other_cost: '',
        hospital_days: '',
        nursing_days: '',
        nursing_cost: '',
        bed_days: '',
        refund: '',
        compensation_cost: '',
        remark: ''
      }
    },
    cancel(form) {
      if (form === 'add') {
        this.handleHurtReset('addPayForm')
      } else {
        this.handleHurtReset('editPayForm')
      }
    },
    cancel2(form) {
      if (form === 'add') {
        this.handleMaintainReset('addPayForm')
      } else {
        this.handleMaintainReset('editPayForm')
      }
    },
    refreshTable(event) {
      this.detailData.push(event.detail)
    },
    formReset() {
      this.form = {
        date: '',
        license_plate_num: '',
        case_number: '',
        driver: '',
        receiver_id: '',
        caseReceiver: '',
        accident_info: '',
        violation: '',
        nature: '',
        responsible: '',
        loss_cost: '',
        remark: ''
      }
    },
    formSubmit(e) {
      this.$refs.addBaseForm.validate(valid => {
        if (valid) {
          this.submitLoading = e === 'submit'
          this.saveLoading = e === 'save'
          this.form.nodeType = e
          this.form.nodeKey = this.nodeKey
          this.form.detailData = this.detailData
          delete this.form.id
          storeAccidentSociety(this.form).then(res => {
            this.submitLoading = this.saveLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'addAccidentSociety')
              this.$router.push({
                name: 'accidentSociety'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        } else {
          this.$Message.error('请填写必填字段')
        }
      })
    },
    getLicensePlateNumList() {
      licensePlateNumList().then(res => {
        const data = []
        res.data.forEach(function (e, i) {
          data.push({
            label: e,
            value: e
          })
        })
        this.licensePlateNumList = data
      })
    },
    handleReset() {
      this.form = {
        date: '',
        license_plate_num: '',
        case_number: '',
        driver: '', // 默认当前用户
        accident_info: '',
        accident_file: [],
        violation: '',
        nature: '',
        responsible: '',
        total_cost: '',
        remark: ''
      }
      this.$refs.uploadStartFile.handleClearFiles()
    },
    init() {
      this.getLicensePlateNumList()
    },
    selectDetail(e) {
      this.selectDetailList = e
    },
    selectMaintain(e) {
      this.selectMaintainList = e
    },
    selectMaintainFile() {
    },
    setButtonStatus() {
      const roleName = this.$store.getters.user.roleName[0]
      this.nodeKey =
        roleName === '事故-事故处理部'
          ? 'accident_department'
          : roleName === '事故-财务部'
            ? 'accident_finance'
            : 'accident_leader'
    }
  }
}
</script>
<style lang="">
.fromTitle {
  width: 49%;
  font-weight: 700;
  padding-left: 10px;
  margin: 30px 0;
  border-left: 5px solid #0079fe;
}

.ivu-tabs-nav-wrap {
  border: none;
}

.ivu-tabs-nav {
  width: 100%;
}

.ivu-tabs-tab {
  width: 33%;
  text-align: center;
}

.btns {
  margin: 15px 0;
}
</style>
